import React, { useState, useEffect } from 'react'
import '../../Order_management/Component/Css/Order.css'

import { UserOutlined } from '@ant-design/icons';


import { Button, Form, Input, Select, Space, DatePicker } from 'antd';

const { Option } = Select;
const { RangePicker } = DatePicker;


import { getafter, updateafter } from '../../../../request/api'




export default function Title(props) {
    const { getTitle, type, list_id,getall } = props

    let [order_id, setorder_id] = useState('')
    let [_id, set_id] = useState('')
    let [zitidian, settizidian] = useState('')
    let [user, setuser] = useState('')
    let [After_sales_state, setAfter_sales_state] = useState('请选择售后类型')
    let [zitidiantype, setzitidiantype] = useState('请选择自提点')


    // 重置搜索
    const onFinish = async () => {
        setorder_id('')
        set_id('')
        settizidian('')
        setuser('')
        setAfter_sales_state('请选择售后类型')
        setzitidiantype('请选择自提点')
        const data: any = await getafter({})
        getTitle(data.data)
    }

    // 搜索
    const Getafter: any = async () => {
        let from = {
            order_id,
            _id,
            zitidian,
            user,
            After_sales_state,
            zitidiantype,
            type
        }
        const data: any = await getafter({ from })
        getTitle(data.data)
    }
    // 批量修改
    const Updateafter = async (item:string) => {
        let from = {
            list_id,
            item,
        }
        const data:any = await updateafter({ from })
        if(data.code ==200){
            alert('修改成功')
            getall(data.code)

        }
    }

    return (
        <div>
            <div className='Title'>
                <Input size="large" placeholder="请输入订单号" prefix='订单号：' value={order_id} onChange={(e) => {
                    setorder_id(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入售后ID" prefix='售后ID：' value={_id} onChange={(e) => {
                    set_id(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入自提点名称" prefix='自提点名称：' value={zitidian} onChange={(e) => {
                    settizidian(e.target.value)
                }} className='user' />
                <Input size="large" placeholder="请输入用户" prefix='用户：' value={user} onChange={(e) => {
                    setuser(e.target.value)
                }} className='user' />
                <Select
                    value={zitidiantype}
                    onChange={(e) => { setzitidiantype(e) }}
                    className='Select'
                    placeholder="请选择自提点类别"
                    allowClear
                >
                    <Option value="便利店">便利店</Option>
                    <Option value="快递驿站">快递驿站</Option>
                    <Option value="杂货店">杂货店</Option>
                    <Option value="水果店">水果店</Option>
                    <Option value="生鲜店">生鲜店</Option>
                    <Option value="其他">其他</Option>
                </Select>

                <Select
                    className='Select'
                    placeholder="售后类型"
                    allowClear
                    value={After_sales_state}
                    onChange={(e) => {
                        setAfter_sales_state(e)
                    }}
                >
                    <Option value="未收到货-仅退款">未收到货-仅退款</Option>
                    <Option value="少件-漏件">少件-漏件</Option>
                </Select>
                <div >
                    <Button size="large" onClick={() => {
                        onFinish()
                    }}>重置</Button>
                    <Button size="large" onClick={() => {
                        Getafter()
                    }
                    } >检索</Button>
                    <Button size="large" style={{ color: 'red', border: '1px solid red' }} onClick={() => {
                        Updateafter('已通过')
                    }}>批量通过</Button>
                    <Button size="large" style={{ color: 'red', border: '1px solid red' }} onClick={()=>{
                        Updateafter('已驳回')
                    }}>批量驳回</Button>
                </div>
            </div>
        </div>
    )
}
